<template>
  <div class="heard-search">
    <el-form ref="formRef" :model="queryParam" :inline="true">
      <el-form-item label="合作编号">
        <el-input v-model="queryParam.indexId" placeholder="合作编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="中介名称/备注" prop="agencyName">
        <el-input v-model="queryParam.agencyName" placeholder="模糊搜索" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSearch">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="main-body">
    <div class="p-1">
      <el-button type="primary" @click="addAgency">新增</el-button>
    </div>

    <el-table :data="data" border height="800px">
      <el-table-column label="序号"  width="80" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column label="编码" prop="indexId" sortable  width="80" align="center"/>
      <el-table-column label="中介名称" prop="agencyName"  width="180" />
      <el-table-column label="备注" prop="nickName" width="600" align="center"/>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope"  >
          <el-button @click="bianji(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <Modal ref="modalRef" @ok="select"></Modal>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Modal from "./YgModal.vue"
const formRef = ref(null)
const queryParam = ref({})
const item = ref({})
const data = ref([])

import request from '@/config/axios'
import {} from "@/router/modules/remaining";
const doSearch = async function () {
  const response = await request.get({
    url: '/agency/list',
    params: queryParam.value
  })
  console.log("----1----", response)
  data.value = response.map(item => {
    item.indexId = Number(item.indexId)
    return item
  })
}
async function deleteItem(params) {
  ElMessageBox.alert('删除吗', params.agencyName, {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',

  }).then(res => {
    try {
      request.delete({
        url: "/agency/deleteById",
        params: { id: params.id }
      }).then(() => {
        doSearch()
      })

    } catch (error) {
      throw error;
    } finally {

    }
  })

}

const modalRef = ref(null)
const addAgency = function () {
  modalRef.value?.add()
}
const bianji = (row) => {
  item.value = row
  modalRef.value?.bianji(row)
}
const select = function () {
  doSearch()
}

const showAddress = ref(false)


onMounted(() => {
  doSearch()
});
</script>

<style scoped lang="scss">
.heard-search {
  margin: 10px 5px 0 10px;

  .el-input {
    --el-input-width: 220px;
  }
}
</style>
